<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息中心</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .message-item {
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .message-item:hover {
            background-color: #f8f9fa;
        }
        .message-item.unread {
            background-color: #e8f4ff;
        }
        .message-title {
            font-weight: 500;
        }
        .message-content {
            color: #6c757d;
            font-size: 0.9em;
        }
        .message-time {
            color: #999;
            font-size: 0.8em;
        }
        .redirect-link {
            color: #007bff;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h2>消息中心</h2>
        
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>我的消息</span>
                <button class="btn btn-sm btn-outline-primary" onclick="markAllAsRead()">全部标记为已读</button>
            </div>
            <div class="card-body p-0">
                <div id="messageList" class="list-group list-group-flush">
                    <!-- 消息列表将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 消息详情模态框 -->
    <div class="modal fade" id="messageModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="messageModalTitle"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p id="messageModalContent"></p>
                    <div id="redirectSection" class="mt-3" style="display: none;">
                        <a id="redirectLink" href="#" class="redirect-link" target="_blank">点击跳转到相关页面</a>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        // API基础URL
        const API_BASE_URL = '/sys/message';
        
        // 页面加载完成后获取消息列表
        $(document).ready(function() {
            loadMessages();
        });
        
        // 获取消息列表
        function loadMessages() {
            $.get(`${API_BASE_URL}/list?page=1&limit=20`, function(response) {
                if (response.code === 0) {
                    renderMessageList(response.data.records);
                } else {
                    showMessage('获取消息列表失败: ' + response.msg, 'danger');
                }
            }).fail(function() {
                showMessage('请求失败，请检查网络连接', 'danger');
            });
        }
        
        // 渲染消息列表
        function renderMessageList(messages) {
            const container = $('#messageList');
            container.empty();
            
            if (!messages || messages.length === 0) {
                container.append('<div class="list-group-item text-center text-muted py-4">暂无消息</div>');
                return;
            }
            
            messages.forEach(function(message) {
                const isUnread = message.isRead === 0;
                const itemClass = isUnread ? 'message-item unread list-group-item' : 'message-item list-group-item';
                const timeStr = formatTime(message.createTime);
                
                const itemHtml = `
                    <div class="${itemClass}" onclick="showMessageDetail(${message.messageId}, '${message.redirectUrl || ''}')">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <div class="message-title">${message.title}</div>
                                <div class="message-content">${message.content}</div>
                            </div>
                            <div class="message-time ms-2">${timeStr}</div>
                        </div>
                        ${message.redirectUrl ? '<div class="mt-1"><span class="badge bg-primary">可跳转</span></div>' : ''}
                    </div>
                `;
                
                container.append(itemHtml);
            });
        }
        
        // 显示消息详情
        function showMessageDetail(messageId, redirectUrl) {
            // 标记消息为已读
            markAsRead(messageId);
            
            // 获取消息详情
            $.get(`${API_BASE_URL}/list?page=1&limit=1`, function(response) {
                if (response.code === 0) {
                    const message = response.data.records.find(m => m.messageId == messageId);
                    if (message) {
                        $('#messageModalTitle').text(message.title);
                        $('#messageModalContent').text(message.content);
                        
                        // 处理跳转链接
                        if (redirectUrl) {
                            $('#redirectLink').attr('href', redirectUrl);
                            $('#redirectSection').show();
                        } else {
                            $('#redirectSection').hide();
                        }
                        
                        // 显示模态框
                        const modal = new bootstrap.Modal(document.getElementById('messageModal'));
                        modal.show();
                    }
                }
            });
        }
        
        // 标记消息为已读
        function markAsRead(messageId) {
            $.post(`${API_BASE_URL}/read/${messageId}`, function(response) {
                if (response.code === 0) {
                    // 重新加载消息列表
                    loadMessages();
                }
            });
        }
        
        // 全部标记为已读
        function markAllAsRead() {
            if (confirm('确定要将所有消息标记为已读吗？')) {
                // 这里应该调用批量标记为已读的接口
                showMessage('功能待实现', 'warning');
            }
        }
        
        // 格式化时间
        function formatTime(timeStr) {
            if (!timeStr) return '';
            const date = new Date(timeStr);
            const now = new Date();
            const diff = now - date;
            
            // 如果是今天，显示时间
            if (date.toDateString() === now.toDateString()) {
                return date.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'});
            }
            
            // 如果是昨天，显示"昨天"
            const yesterday = new Date(now);
            yesterday.setDate(yesterday.getDate() - 1);
            if (date.toDateString() === yesterday.toDateString()) {
                return '昨天';
            }
            
            // 否则显示日期
            return date.toLocaleDateString('zh-CN');
        }
        
        // 显示提示信息
        function showMessage(text, type) {
            // 简单的提示实现
            alert(text);
        }
    </script>
</body>
</html>